<clr-modal [(clrModalOpen)]="isOpen" clrModalSize="lg" class="modal-fixed modal-properties">
  <div class="modal-title">
    <h3 style="margin-top: 0.2rem">{{ title }}</h3>
    <label class="modal-search">
      <span class="search-wrapper">
        <input
          type="search"
          class="clr-input"
          placeholder="Search properties ..."
          [(ngModel)]="searchFilterText"
          [ngModelOptions]="{standalone: true}"
        />
        <clr-icon shape="search"></clr-icon>
      </span>
    </label>
  </div>
  <div class="modal-body app-properties" *ngIf="propertiesGroupModels.length > 0" style="max-height: 600px">
    <form name="app-properties" clrForm clrLayout="horizontal" (submit)="handleOk()">
      <ng-container *ngFor="let group of propertiesGroupModels">
        <div class="properties" *ngIf="controlModelsToDisplay(group).length > 0">
          <div class="line-toggle">
            <a class="toggle" (click)="collapse(group.title)">
              <clr-icon [class.open]="state[group.title]" shape="angle"></clr-icon>
              {{ group.title || 'General' }}
              <span class="label label-warning" style="margin-left: 10px; padding: 2px 9px; display: inline">{{
                controlModelsToDisplay(group).length
              }}</span>
            </a>
          </div>
          <div *ngIf="state[group.title]">
            <clr-properties-group
              [propertiesGroupModel]="group"
              [form]="propertiesFormGroup"
              [filter]="propertiesFilter"
            >
            </clr-properties-group>
          </div>
        </div>
      </ng-container>
    </form>
  </div>
  <div class="modal-body app-properties" *ngIf="propertiesGroupModels.length === 0">
    <div style="padding: 10px 0"><clr-spinner clrSmall clrInline></clr-spinner>&nbsp; Loading...</div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="handleCancel()">Cancel</button>
    <button type="submit" class="btn btn-primary" (click)="handleOk()">Update</button>
  </div>
</clr-modal>
